<template>
	<view class="share-wp">
		<view class="goods-main-img">
			<view class="main-img-wp flex_center">
				<image mode="widthFix" class="main-img" :src="orderInfo.pic?orderInfo.pic:orderInfo.image">
				</image>
			</view>
			<view class="goods-info">
				<view class="title">
					{{orderInfo.prodName?orderInfo.prodName:orderInfo.name}}
				</view>
				<view class="price-wp">
					{{orderInfo.price?`￥ ${orderInfo.price}`:''}} {{orderInfo.units?`/ ${orderInfo.units}`:''}}
				</view>
			</view>
		</view>
		<goods-item :list="goodsList" v-if="isGifts" :goodsOpenId="goodsOwnerOpenId"></goods-item>
		<view class="my-shop-add-form" v-if="!hadSumbit">
			<u--form labelPosition="top" :model="model" :rules="rules" ref="form" labelWidth='180' labelAlign='left'
				:labelStyle="{fontSize: '26rpx',color: '#1D2129',height:'80rpx',lineHeight:'80rpx'}"
				:borderBottom="true">

				<u-form-item label="收货人" prop="takePeople" borderBottom class='formItemWp'>
					<u--input placeholder="请输入收货人" suffixIconStyle="color: #909399;font-size:30rpx" border="none"
						disabledColor="#fff" :disabled="hadSumbit" maxlength="10" v-model.trim="model.takePeople"
						clearable>
					</u--input>
				</u-form-item>
				<u-form-item label="收货地址" prop="address" borderBottom class='formItemWp'>
					<u--input placeholder="请输入收货地址" suffixIconStyle="color: #909399;font-size:30rpx" border="none"
						disabledColor="#fff" :disabled="hadSumbit" maxlength="30" v-model.trim="model.address"
						clearable>
					</u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" borderBottom class='formItemWp'>
					<u--input type="number" placeholder="请输入手机号" suffixIconStyle="color: #909399;font-size:30rpx"
						border="none" disabledColor="#fff" :disabled="hadSumbit" maxlength="11"
						v-model.number="model.mobile" clearable>
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="bottom-box">
			<u-button :throttleTime="800" v-if="hadSumbit" :disabled="true" :custom-style="{
					  background: '#276aee',
					  color: '#fff',
					  width: '682rpx',
					  border:'none'
					}">已领取</u-button>
			<u-button :throttleTime="800" v-else @click="submit" :custom-style="{
				  background: '#276aee',
				  color: '#fff',
				  width: '682rpx',
				  border:'none'
				}">领取</u-button>


		</view>
	</view>
</template>

<script>
	import goodsItem from '@/pagesMall/components/goodsItem/goodsItem.vue'
	export default {
		components: {
			goodsItem
		},
		data() {
			return {
				orderInfo: {},
				model: {
					mobile: '',
					address: '',
					takePeople: '',
					purchaseOpenId: ''
				},
				rules: {
					takePeople: [{
						required: true,
						message: '请输入收货人',
						trigger: ['blur', 'change'],
					}, ],
					address: [{
						required: true,
						message: '请输入收货地址',
						trigger: ['blur', 'change'],
					}, ],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change'],
					}, {
						validator: (rule, value, callback) => {

							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
					}],


				},
				hadSumbit: false,
				shareInfo: {},
				goodsList: [],
				isGifts: false,
				goodsOwnerOpenId: '',
				// giftId: '', //礼包编号管理码
				orderId: ''
			};
		},
		onLoad(opt) {
			console.log(opt, 'opt');
			this.goodsOwnerOpenId = opt.openId

			this.isGifts = opt.type == 'gifts' ? true : false
			this.getOpenId()
			if (this.isGifts) {
				this.orderId = opt.orderId
				this.getGiftOrderDetail(opt.orderId)
				this.getGoodsInfo(opt.giftId)
				// this.giftId = opt.giftId
			} else {
				this.getGoodsOrderDetail(opt.orderId)
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			async getGoodsInfo(id) {
				let res = await this.$api.getMsGiftPacksPageDetail({
					id,
					openId: this.goodsOwnerOpenId
				})
				if (res.success && res.result.msGiftProdVOList) {
					this.goodsList = res.result.msGiftProdVOList || []
				}
			},
			async getGiftOrderDetail(id) {
				let res = await this.$api.getGiftPacks({
					id
				})
				if (res.success && res.code == 200) {

					this.orderInfo = res.result
					if (res.result.useStatus == 1) {
						this.hadSumbit = true
						uni.showToast({
							title: '该礼包码已被使用',
							icon: 'none'
						})
						return
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			//获取openId
			async getOpenId() {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: async (loginRes) => {
						let code = loginRes.code
						let payload = {
							code
						}
						let res = await this.$api.getOpenIdByCode(payload);
						if (res) {
							console.log(res, 'res');
							this.model.purchaseOpenId = res.openid
							uni.setStorageSync('openId', res)
						}
					}
				});
			},
			//获取订单详情
			async getGoodsOrderDetail(id) {
				let res = await this.$api.queryOrderDetailById({
					id
				})
				if (res.success) {
					this.orderInfo = res.result
					this.model.mobile = res.result.mobile ? res.result.mobile : ''
					this.model.address = res.result.address ? res.result.address : ''
					this.model.takePeople = res.result.takePeople ? res.result.takePeople : ''
					if (this.model.mobile && this.model.address && this.model.takePeople) {
						this.hadSumbit = true
					} else {
						this.hadSumbit = false
					}

				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}

			},
			submit() {
				// if (this.model.purchaseOpenId == this.goodsOwnerOpenId) {
				// 	return uni.showToast({
				// 		title: '这是您自己的分享商品',
				// 		icon: 'none'
				// 	})
				// }
				this.$refs.form.validate().then(async res => {
					if (this.isGifts) {
						let payload = {
							id: this.orderId,
							...this.model
						}
						const {
							success,
							message,
							code
						} = await this.$api.getGiftPresented(payload)
						if (code == 200 && success) {
							uni.showToast({
								title: '领取成功'
							})
							this.hadSumbit = true
						} else {
							uni.showToast({
								title: message,
								icon: 'none'
							});
						}

					} else {
						let payload = {
							id: this.orderInfo.id,
							...this.model
						}
						const {
							success,
							message
						} = await this.$api.getProductGivey(payload)
						if (success) {
							uni.showToast({
								title: '领取成功'
							})
							this.hadSumbit = true
						} else {
							uni.showToast({
								title: message,
								icon: 'none'
							});
						}
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.share-wp {
		padding-bottom: 200rpx;

		.goods-main-img {
			.main-img {
				margin-top: 40rpx;
				width: 650rpx;
				box-shadow: 4rpx 4rpx 10rpx #f7f8fa;
			}

			.goods-info {
				margin-top: 10rpx;
				padding: 32rpx;

				.title {
					text-align: center;
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1D2129;
					line-height: 45rpx;

				}

				.price-wp {
					text-align: center;
					margin-top: 10rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #FF7D00;
					line-height: 50rpx;

				}
			}

			.padding-bar {
				height: 40rpx;
				background-color: #f7f8fa;
			}

		}

		.my-shop-add-form {
			margin: 32rpx;

			.uploadWp {
				width: 218rpx;
				height: 218rpx;
				background-color: #f7f8fa;
				justify-content: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
			}
		}

		.btn-box {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border: none;
			position: fixed;
			bottom: 20rpx;
			bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
			bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		}
	}
</style>